<template>
  <div style="width: 100%; height: 100%; position: relative">
    <el-empty
      style="position: absolute; z-index: 99; width: 100%"
      v-show="lineEchartsData.xAxisData.length == 0"
      description="未搜到相关数据"
    ></el-empty>
    <div
      style="font-size: 18px; font-weight: 800; margin-bottom: 50px; position: absolute"
    >
      核销情况汇总
    </div>
    <div
      v-if="lineEchartsData.series1.length > 0"
      id="lineChart"
      style="width: 100%; height: 100%"
    ></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  mounted() {
    this.init();
  },
  props: {
    lineEchartsData: Object,
  },
  watch: {
    lineEchartsData: {
      // 数据变化时执行的逻辑代码
      handler(newVal, oldVal) {
        if (this.lineEchartsData.series1.length > 0) {
          this.$nextTick(() => {
            try {
              this.init();
            } catch (error) {
              console.log(error);
            }
          });
        }
      },
      // 开启深度监听
      deep: true,
    },
  },
  methods: {
    init() {
      var chartDom = document.getElementById("lineChart");
   
      if (chartDom) {
        var myChart = this.$echarts.init(chartDom);
        var option = {
          // title: {
          //   text: "核销情况汇总",
          // },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            left: "center",
            top: 0,
            bottom: 20,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            // feature: {
            //   saveAsImage: {}
            // }
          },
          xAxis: {
            type: "category",
            data: this.lineEchartsData.xAxisData,
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "实际使用情况",
              type: "bar",
              // stack: 'Total',
              emphasis: {
                focus: "series",
              },
              data: this.lineEchartsData.series1,
              label: {
                show: true,
                position: "top",
              },
            },
            {
              name: "计划使用情况",
              type: "bar",
              label: {
                show: true,
                position: "top",
              },
              // stack: 'Total',
              emphasis: {
                focus: "series",
              },
              data: this.lineEchartsData.series2,
            },
          ],
        };
        option && myChart.setOption(option);
      }
    },
  },
};
</script>

<style lang="less" scoped></style>
